<!-- 中奖编码 -->
<template>
  <s-layout title="编码">
    <view class="code-box">
      <view
        v-for="(item, index) in state.dataList"
        :key="index"
        class="code-item ss-flex ss-col-center ss-row-between"
      >
        <view>开奖编码：{{ item.code }}</view>
        <text :class="item.open_prize_status">
          {{ stateLabel(item.open_prize_status) }}
        </text>
      </view>
    </view>
  </s-layout>
</template>

<script setup>
import { onLoad } from "@dcloudio/uni-app";
import { reactive } from "vue";

const state = reactive({
  orderId: "", // 订单id
  dataList: [], // 数据列表
});

// 状态文字
function stateLabel(val) {
  switch (val) {
    case "wait":
      return "未开奖";
    case "no":
      return "未中奖";
    case "first":
      return "一等奖";
    case "second":
      return "二等奖";
    case "third":
      return "三等奖";
    default:
      return "已失效";
  }
}

onLoad((e) => {
  state.dataList = JSON.parse(e.prizeRecord);
});
</script>

<style lang="scss" scoped>
.code-box {
  padding: 30rpx;
  .code-item {
    padding: 24rpx 20rpx;
    border-radius: 12rpx;
    background-color: #fff;
    box-shadow: 0 0 10px 0 rgba(217, 217, 217, 0.4);
    color: #252525;
    font-size: 28rpx;
    line-height: 44rpx;
    margin-bottom: 20rpx;
    text {
      font-weight: 500;
    }
    .wait,
    .no {
      color: #979797;
    }
    .third {
      color: #00c853;
    }
    .second {
      color: #ffbb33;
    }
    .first {
      color: #ff513d;
    }
  }
}
</style>
